<template>
  <div 
    v-if="showTabBar" 
    class="tabbar fixed bottom-0 left-0 right-0 h-14 flex items-center justify-around bg-white dark:bg-gray-800 shadow-lg z-10"
  >
    <div 
      v-for="tab in tabs" 
      :key="tab.path" 
      class="tab-item flex flex-col items-center justify-center w-1/5 h-full"
      :class="{ 'active': activeTab === tab.path }"
      @click="switchTab(tab.path)"
    >
      <div class="tab-icon text-xl mb-1">{{ tab.icon }}</div>
      <div class="tab-text text-xs">{{ t(`tabbar.${tab.name}`) }}</div>
    </div>
  </div>
  
  <!-- 占位元素，防止内容被底部栏遮挡 -->
  <div v-if="showTabBar" class="h-14"></div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'

const route = useRoute()
const router = useRouter()
const { t } = useI18n()

// Tab项配置
const tabs = [
  { 
    path: '/home', 
    name: 'home', 
    icon: '🏠' 
  },
  { 
    path: '/fund-center', 
    name: 'fundCenter', 
    icon: '💰' 
  },
  { 
    path: '/safe-box', 
    name: 'safeBox', 
    icon: '📋' 
  },
  { 
    path: '/card-center', 
    name: 'cardCenter', 
    icon: '💳' 
  },
  { 
    path: '/mine', 
    name: 'mine', 
    icon: '👤' 
  }
]

// 当前激活的tab
const activeTab = computed(() => {
  return route.path
})

// 切换tab
const switchTab = (path: string) => {
  router.push(path)
}

// 是否显示TabBar
const showTabBar = computed(() => {
  return route.meta.showTabBar
})
</script>

<style scoped>
.tab-item {
  color: #a0aec0;
}
.dark .tab-item {
  color: #a0aec0;
}
</style>